<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="utf-8">
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }
    #app {
      width: 100vw;
      height: 100vh;
    }
  </style>
  <!-- <script src="./vue.esm-browser.js"></script> -->
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
    <p>count:{{ state }}</p>
    <p>
      <button v-on:click="increment()">add count</button>
    </p>
    <p>
      <button @click="revserveMsg()">reserve</button>
    </p>
    <ul>
      <li v-for="(item,index) in options" :key="index">
        {{item.label}} -- {{item.value}}
      </li>
    </ul>

  </div>
  <script type="module">
    import * as Vue from "./vue.esm-browser.js";
    let myComponent = {
      setup() {
        // const state = Vue.reactive({ count: 0 });
        const state = Vue.ref(8439);
        const message = Vue.ref('');
        message.value = 'this is msg';
        function increment() {
          state.value++;
        }
        function revserveMsg() {
          message.value = message.value.split('').reverse().join('');
        }
        const options = Vue.reactive([
          {
            label: "ceshi 1",
            value: '1'
          },
          {
            label: "ceshi 1",
            value: '2'
          },
          {
            label: "ceshi 1",
            value: '3'
          }
        ])
        return {
          state,
          message,
          options,
          increment,
          revserveMsg,
        }
      }
    }
    const app = Vue.createApp();
    app.component('myComponent', myComponent);
    console.log(app);
    app.mount('#app');
  </script>
</body>

</html>